<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-comment</title>
    <style rel="stylesheet" type="text/css">
        div{
            width: 100%;
            height: 50px;
        }
    </style>
</head>
<body>
    <div id="login">
        请输入用户名：<input type="text" id="username" placeholder="用户名">
        <input type="button" value="登录" id="btn">
    </div>

    <div id="comment">
        请输入你的评论：<input type="text" id="mycomment" placeholder="评论">
        <input type="button" value="评论" id="submit">
    </div>

    <div id="mylist"></div>

    <script type="text/javascript">
        var Ologin = document.getElementById('login');
        var Ouser = document.getElementById('username');
        var Obtn = document.getElementById('btn');
        var Omycomment = document.getElementById('mycomment');

        Obtn.onclick = function(){
            var xhr = getXhr();

            xhr.open("post","07.php");
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//文档类型
            xhr.send("user="+Ouser.value);

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var data = xhr.responseText;
                    if(data!=''){
                        Ologin.innerHTML = "<strong>welcome "+data+"</strong>";
                    }
                }
            }
        }

        function getXhr(){
            var xhr = null;

            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;
        }
    </script>
</body>
</html>
